<!-- 课程详情 -->
<template>
  <div class='courseDetail container'>
    <div class="detail_img">
      <div class="banner_img">
        <img :src="bannerUrl" alt="">
      </div>
      <div class="desc_img">
        <img :src="descImgUrl" alt="">
      </div>
    </div>

    <div class="bottom">
      <div class="menu_box" @click="showMenu = true">
        <i class="icon_menu"></i>
        <span>目录</span>
      </div>
      <div class="buy" @click="buyClass">立即报名</div>
    </div>

    <van-popup
      v-model="showMenu"
      position="bottom"
      round
      :style="{ height: '50%' }"
    >
      <span class="title">目录</span>
      <ul class="menu_list">
        <li class="menu_item" v-for="(item, index) in productInfo.bmSchoolOpenExit.bmSchoolOpenExitContentList" :key="index">
          <span class="menu_index">第{{index + 1}}章</span>
          <span class="menu_name">{{item.chapterName}}</span>
          <i class="icon_play" v-if="item.isAudition == 1" @click="toPlayVideo(item)"></i>
          <i class="icon_lock" v-else></i>
        </li>
        
      </ul>
    </van-popup>
  </div>
</template>

<script>
const wx = require('weixin-js-sdk');
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");
export default {
  name: '',
  data() {
    return {
      tnData: {},
      bannerUrl: '',
      descImgUrl: '',
      showMenu: false,
      productInfo: {
        bmSchoolOpenExit: {
          bmSchoolOpenExitContentList: [],
        }
      },
    }
  },

  created() {
    this.initData();
    this.insertPvUv();
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    insertPvUv() {
      this.post({
        API: 'insertPvUv',
        data: {
          openId: localStorage.getItem('openId'),
          pageName: '课程详情',
          pageType: 'courseDetail'
        }
      }).then(res => {

      })
    },


    buyClass() {
      this.$router.push({
        name: 'order',
        query: {
          productId: this.$route.query.id,
          schoolId: this.$route.query.schoolId,
        }
      })
    },

    toPlayVideo(item) {
      this.$router.push({
        name: 'videoPlayer',
        query: {
          videoId: item.audioOrVideoFile,
          subjectName: item.chapterName,
        }
      })
    },

    initData() {
      let data = {
        id: this.$route.query.id,
        schoolId: this.$route.query.schoolId,
      }

      this.formGet({
        API: 'selectById',
        data: data
      }).then(res => {
        this.productInfo = res;
        this.initWxConfig();

        let bannerId = res.bmSchoolOpenExit.briefPicture;
        let descImgId = res.bmSchoolOpenExit.descriptionPoster;
        if(bannerId) {
          this.getImgUrlByAliId(bannerId, 'bannerUrl');
        }

        if(descImgId) {
          this.getImgUrlByAliId(descImgId, 'descImgUrl');
        }
      }).catch(err => {

      })
    },

    getImgUrlByAliId(imgId, type) {
      this.formGet({
        API: 'getImageInfoData',
        data: {
          imageId: imgId,
        }
      }).then(res => {
        if(res.imageInfo) {
          let url = res.imageInfo.url;
          this[type] = url;
          this.$forceUpdate();
        }
      });
      
    },

    initWxConfig() {
      let _this = this;
      let url = window.location.href.split('#')[0];
      url = encodeURIComponent(url)
      console.log(url);
      this.$axios.get(`http://39.105.125.149:8060/banma/getTimestampNonceStrSignature?url=${url}`)
      .then(res => {
        res = res.data.data
        // console.log(res)
        wx.config({
          debug: false, // 开启调试模式,
          appId: 'wx6461e3736f9366e9', // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见附录1
          // jsApiList: ['openlocation', 'getLocation',] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','chooseWXPay'],
        });

        wx.ready(function () {
          wx.onMenuShareAppMessage({ 
            title: _this.productInfo.productName, // 分享标题
            desc: '哇！我发现了一门宝藏课程，北大教育专家研发的幼小衔接！点击进来看看吧', // 分享描述
            link: `http://www.mingxiaoclub.cn/paymentSys/#/courseDetail?id=${_this.$route.query.id}&schoolId=${_this.$route.query.schoolId}&enterType=2`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png', // 分享图标
            success: function () {
              console.log('分享给朋友---success')
              // 设置成功
            },
            error: function(err) {
              console.log(err)
            }
          })
        });

        wx.ready(function () {     
          wx.onMenuShareTimeline({ 
            title: _this.productInfo.productName, // 分享标题
            link: `http://www.mingxiaoclub.cn/paymentSys/#/courseDetail?id=${_this.$route.query.id}&schoolId=${_this.$route.query.schoolId}&enterType=2`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png', // 分享图标
            success: function () {
              console.log('分享到朋友圈---success')
              // 设置成功
            },
            error: function(err) {
              console.log(err)
            }
          })
        });

        wx.error(function(err){
          console.log(err)
        })


      }).catch(err => {
        
      })
    },

  },
}
</script>

<style scoped>
.detail_img {
  font-size: 0;
}
.banner_img, .desc_img {
  width: 100%;
}
.detail_img img{
  width: 100%;
}

.bottom {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 1.68rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .266667rem 0 .64rem;
  box-sizing: border-box;
}
.bottom .menu_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom .icon_menu {
  display: inline-block;
  width: .48rem;
  height: .56rem;
  background: url('../assets/img/icon_menu.png') 0 0 no-repeat;
  background-size: contain;
}
.bottom span {
  font-size: .373333rem;
  color: #000;
}

.bottom .buy {
  width: 7.826667rem;
  height: 1.306667rem;
  background: #FFD33D;
  font-size: .466667rem;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}


span.title {
  font-size: .426667rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.306667rem;
  position: relative;
  font-weight: 600;
}
span.title:after {
  content: '';
  width: 1.093333rem;
  height: .066667rem;
  background: #FFD33D;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

i.icon_play {
  width: .48rem;
  height: .333333rem;
  display: inline-block;
  background: url('../assets/img/icon_play.png') 0 0 no-repeat;
  background-size: contain;
}
i.icon_lock {
  width: .373333rem;
  height: .48rem;
  display: inline-block;
  background: url('../assets/img/icon_lock.png') 0 0 no-repeat;
  background-size: contain;
  margin-right: 3px;
  margin-left: auto;
}

.menu_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .466667rem;
  box-sizing: border-box;
  font-size: .373333rem;
  background: #F6F6F6;
  margin-bottom: .133333rem;
  height: 1.266667rem;
}

.menu_item .menu_index {
  color: #333;
  width: 1.333333rem;
}
.menu_item .menu_name {
  color: #666666;
  margin-left: 0.3rem;
  /* margin-right: 1.4rem; */
}
</style>